<template>
  <div>
    <el-upload
      list-type="picture-card"
      :on-preview="preview"
      action="#"
      :class="{ disabled: fileComputed }"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :limit="limit"
      :file-list="fileList"
      :http-request="upload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="showDialog">
      <img width="100%" :src="imgUrl" alt="" />
    </el-dialog>
    <el-progress
      :percentage="percent"
      :text-inside="true"
      :stroke-width="10"
      status="success"
      v-show="percent != 0"
      style="width:150px;"
    ></el-progress>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
export default {
  name: "ImageUpload",
  data() {
    return {
      percent: 0,
      showDialog: false,
      imgUrl: "",
      fileList: [], // 图片地址设置为数组
    };
  },
  props: {
    limit: {
      default: 1,
      type: Number,
    },
  },
  methods: {
    preview(file) {
      console.log("fileurl", file);
      // 这里应该弹出一个层 层里是点击的图片地址
      this.imgUrl = file.url;
      this.showDialog = true;
    },
    // 删除文件
    handleRemove(file) {
      console.log("222", file);
      // file是点击删除的文件
      //   将原来的文件给排除掉了 剩下的就是最新的数组了
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid);
    },

    handleChange(file, fileList) {
      this.fileList = fileList.map((item) => item);
      // console.log(this.fileList);
    },
    // 自定义上传动作 有个参数 有个file对象，是我们需要上传到腾讯云服务器的内容
    upload(params) {
      console.log("???", params);
      let cos = new COS({
        SecretId: "AKIDRXUGqFXS7YrxnS6e0CFRO4hCXihYMyLS", // 身份识别 ID
        SecretKey: "ykX8Xl4FDCwSq2vRuBG5jLXfv8B2zmPq", // 身份密钥
      });
      // console.log(params.file);
      if (params.file) {
        // 执行上传操作
        cos.putObject(
          {
            Bucket: "wzy-1317339354", // 存储桶
            Region: "ap-nanjing", // 地域
            Key: params.file.name, // 文件名
            Body: params.file, // 要上传的文件对象
            StorageClass: "STANDARD", // 上传的模式类型 直接默认 标准模式即可
            // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
            onProgress: (params) => {
              // console.log(this.params.percent,"ppp");
              this.percent = params.percent * 100;
            },
          },
          (err, data) => {
            console.log("back-data", data);
            // data返回数据之后 应该如何处理
            // data中有一个statusCode === 200 的时候说明上传成功
            if (!err && data.statusCode === 200) {
              this.fileList = this.fileList.map((item) => {
                // 去找谁的uid等于刚刚记录下来的id
                if (item.uid === params.file.uid) {
                  // 将成功的地址赋值给原来的url属性
                  console.log({
                    url: "http://" + data.Location,
                    status: "success",
                  });
                  setTimeout(() => {
                    this.percent = 0;
                  }, 1000);
                  return { url: "http://" + data.Location, status: "success" };
                }
                return item;
              });
            }
            if(err){
              setTimeout(() => {
                    this.percent = 0;
              }, 1000);
              this.$message({
                type:'info',
                message:"图片上传失败",
              })
            }
          }
        );
      }
    },
  },
  computed: {
    // 设定一个计算属性 判断是否已经上传完够了
    fileComputed() {
      return this.fileList.length === this.limit;
    },
  },
};
</script>

<style>
.disabled .el-upload--picture-card {
  display: none;
}
</style>